@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@automattic/onboarding/styles/mixins";

.wpcom__loading {
	--wp-components-color-foreground: #3858e9;
	padding: 1em;
	max-width: 540px;
	margin: 32vh auto 0;

	&.wpcom-loading__boot {
		margin-top: calc(32vh + 60px);
	}

	.wpcom__loading-title {
		@include onboarding-font-recoleta;
		font-weight: 400;
		height: 40px;
		letter-spacing: -0.4px;
		line-height: 40px;
		margin: 0;
		text-align: center;
		vertical-align: middle;

		font-size: $font-title-medium;

		@include break-medium {
			font-size: $font-title-large;
		}
	}

	.wpcom__loading-progress-bar {
		margin: 46px auto 0 auto;
	}

	.wpcom__loading-subtitle {
		color: var(--studio-gray-50);
		font-size: 1rem;
		letter-spacing: -0.02em;
		line-height: 21px;
		margin-top: 24px;
		text-align: center;
	}
}

.is-section-signup {
	.wpcom-loading__boot {
		margin: calc( 32vh + 12px ) auto 0;
	}
}
